<template>
  <List item-layout="vertical" :class="prefixCls">
    <template v-for="item in list" :key="item.title">
      <ListItem>
        <ListItemMeta>
          <template #title>
            <p :class="`${prefixCls}__title`">
              {{ item.location }}
            </p>
          </template>
          <template #description>
            <div :class="`${prefixCls}__content`">
              使用
              <Tag class="mb-2">
                {{ item.browser }}
              </Tag>
              浏览器，在 <Tag class="mb-2"> {{ item.ip }} </Tag> 处登录。
            </div>
          </template>
        </ListItemMeta>
        <div :class="`${prefixCls}__action`">
          <Icon
            v-if="item.icon"
            :class="`${prefixCls}__action-icon`"
            :icon="item.icon"
            :color="item.color"
          />
          {{ item.platform }}
        </div>
        <span :class="`${prefixCls}__time`">{{ item.createdTime }}</span>
      </ListItem>
    </template>
  </List>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { List, Tag } from 'ant-design-vue';
  import Icon from '/@/components/Icon/index';
  import { actions, articleList } from './data';

  export default defineComponent({
    components: {
      List,
      ListItem: List.Item,
      ListItemMeta: List.Item.Meta,
      Tag,
      Icon,
    },
    setup() {
      return {
        prefixCls: 'account-center-article',
        list: articleList,
        actions,
      };
    },
  });
</script>
<style lang="less" scoped>
  .account-center-article {
    &__title {
      margin-bottom: 12px;
      font-size: 18px;
    }

    &__content {
      color: rgba(0, 0, 0, 0.65);
    }

    &__action {
      display: inline-block;
      padding: 0 16px;
      color: rgba(0, 0, 0, 0.45);

      &:nth-child(1),
      &:nth-child(2) {
        border-right: 1px solid rgba(206, 206, 206, 0.4);
      }

      &-icon {
        margin-right: 3px;
      }
    }

    &__time {
      position: absolute;
      right: 20px;
      color: rgba(0, 0, 0, 0.45);
    }
  }
</style>
